<template>
    <span class="spinner">
        <div @click="minusnumberclick" v-bind:class="{ 'grayClass':showoneType=='0','defaultclass':showoneType=='3'}">-</div>
        <input type="number" pattern="[0-9]*" v-on:input="changeNum" class="spinnerinput"  v-model="counter" placeholder=""/>
      <!--<input @blur="checkMobileBlur" slot="right" type="number" placeholder="手机号" v-model="mobile" maxlength="11">-->

                    <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f 3是默认的颜色 #3cc8a8-->

                <div @click ="addnumberclick" v-bind:class="{ 'grayClass1':showtwoType=='0','defaultclass1':showtwoType=='3'}">+</div>

        <!--v-bind:class="{'on':flag==index}"-->
       </span>
</template>

<script>
    export default {
        name: "spinner",
        data() {
            return {
                counter: 0,
                showoneType:'0',
                showtwoType:'0',
                numMax:500,

                tapParams: {
                    timer: null,
                    tapStartTime: 0
                },

            }
        },

        props: {
            index:{

                default:'0',
            },
            amounts:{

                default:'0',
            },
            type:{

                default:'0',//0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f  3是默认颜色
            },
            max: {
                default: 0,

            },
            dataAr: {
                type: Array,//控制确认收货时候最大数据的变化
                default() {
                    return []
                }

            },
            min: {
                default: 0,

            },
            value: {
                validator(val) {
                    return /^(([1-9]\d*)|0)$/.test(val);
                }
            },
            width: {
                validator(value) {
                    return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
                },
                default: '2rem'
            },
            height: {
                validator(value) {
                    return /^(\.|\d+\.)?\d+(px|rem)$/.test(value);
                },
                default: '.8rem'
            }
        },
        methods: {
            changeNum()
            {
                if(this.counter===''||this.counter===null)
                {
                    this.counter=0;
                }
                var  string=this.counter.toString();
                if (string.substring(0,1)==='0')
                {
                    this.counter=0;
                }
                if (this.counter>this.numMax)
                {
                    this.counter=this.numMax;
                    this.$dialog.toast({
                        mes: '不得大于采购单上的数量！',
                        timeout: 1500
                    });


                }
            },
            minusnumberclick()
            {
                if (this.counter<=0)
                {
                    if (this.counter === 0) {

                    }
                    return;
                }else
                {
                    this.counter--;

                    this.$emit('minusnumberclick',{'amounts':this.counter,'index':this.index}); //主动触发selectHead方法，'123'为向父组件传递的数据

                    if (this.counter===0)
                    {
                        this.showoneType='0';
                    }else
                    {

                    }
                    if (this.numMax>this.counter)
                    {
                        this.showtwoType=this.type;
                    }else
                    {

                    }


                }

            },
            addnumberclick()
            {
                   if (this.numMax>this.counter)
                   {
                       this.counter++;
                       if(this.counter===this.numMax)
                       {
                           this.showtwoType='0';

                       }else
                       {
                           this.showtwoType=this.type;

                       }
                       if (this.numMax>0)
                       {
                           this.showoneType=this.type;

                       }
                       this.$emit('addnumberclick',{'amounts':this.counter,'index':this.index}); //主动触发selectHead方法，'123'为向父组件传递的数据


                   }else
                   {
                       this.showtwoType='0';
                       return;
                   }

            },

        },
        watch: {
            amounts:{
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
                handler(newValue,oldValue){

                    this.counter=this.amounts;


                },
                deep:true
            },
            value() {
                this.setDefalutValue();
            }


        },
        created(){

            this.counter=this.amounts;

            this.showoneType=this.type;
            this.showtwoType=this.type;
            if (this.type === '3') {
                this.numMax=this.dataAr[this.index].amounts;
                this.showtwoType='0';
            }else
            {
                this.numMax=this.max;
            }

        },
        mounted() {
            this.$nextTick(this.init);
        }
    }
</script>

<style scoped>

    .spinner{
        border:1px solid #eae8e8;
        border-radius:1px;
        display:inline-block;
        overflow:hidden;
        width: 2rem;
        height: 0.6rem;
    }
    .spinnerinput
    {
        width:40%;
        position:relative;
        left: 0rem;
        font-size: 0.3rem;
        border:0px solid #e1e1e1;
        height: 100%;
        text-align: center;
        color: #a5a6a6;
    }
    .grayClass
    {
        float:left;
        width:30%;
        height:inherit;
        text-align:center;
        font-weight:700;
        color:white;
        letter-spacing:0;
        font-size: 0.4rem;
        position:relative;
        background-color:#cccece;
        overflow:hidden
    }
    .defaultclass
    {
        /*整体的颜色*/
        float:left;
        width:30%;
        hconsoleeight:inherit;
        text-align:center;
        font-weight:700;
        color:white;
        letter-spacing:0;
        font-size: 0.4rem;
        position:relative;
        background-color:#3cc8a8;
        overflow:hidden
    }
    .grayClass1
    {
        float:right;
        width:30%;
        height:inherit;
        text-align:center;
        font-weight:700;
        color:white;
        letter-spacing:0;
        font-size: 0.4rem;
        position:relative;
        background-color:#cccece;
        overflow:hidden
    }
    .defaultclass1
    {
        /*整体的颜色*/
        float:right;
        width:30%;
        hconsoleeight:inherit;
        text-align:center;
        font-weight:700;
        color:white;
        letter-spacing:0;
        font-size: 0.4rem;
        position:relative;
        background-color:#3cc8a8;
        overflow:hidden
    }


</style>